<style scoped>
[v-cloak] {
  display: none;
}
.picscreen {
  position: relative;
}

.picbg {
  /*background-image: url("../../assets/images/projectlist_1.jpg");*/
  background-size: cover;
  position: absolute;
  height: 100px;
  width: 100%;
  background-color: #8b8b8b;
  top: -15px;
  left: 0;
}

.pictitle {
  font-size: 1.4rem;
  font-family: Georgia, sans-serif, serif;
}

.pro-tab {
  line-height: 2.5;
}

.picdesc {
  font-size: 0.9rem;
  display: block;
}

.picTag {
  margin-right: 30px;
  background-color: #608ebded;
  color: white;
  padding: 5px;
  cursor: pointer;
  /*border: 1px solid #e8eaec;*/
  border-radius: 4px;
}

.project-input {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 2%;
  width: 400px;
}

.search-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* font-size: 0.5rem; */
  width: 100px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
}

.project-start-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  right: 20px;
  position: absolute;
  /* font-size: 0.5rem; */
  border-radius: 6px;
  width: 150px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/*Tabs--style*/
.tabs {
  min-height: 500px;
  border-top: 1px solid lightgrey;
}

.tabpane-syle {
  font-size: 20px;
  background-color: rgba(133, 115, 92, 0.1);
  min-height: 500px;
}

.ivu-tabs-bar {
  /*border-bottom: 1px solid #dddee1;*/
  margin-bottom: 0px;
}

.ivu-tabs-nav-wrap {
  text-align: center;
  margin-bottom: 0px;
}

.ivu-tabs-nav-scroll {
  margin-left: 5%;
}

.ivu-tabs-tab {
  font-size: 16px;
  font-weight: bold;
}

.ivu-row {
  margin-bottom: 45px;
}

.pro-page {
  bottom: 75px;
  left: 43%;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

img {
  width: 100%;
  height: auto;
}

.projectTitle {
  height: 16px;
  line-height: 15px;
  font-size: 16px;
  max-width: 150px;
  padding-left: 5px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardicon {
  height: 15px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
</style>
<template>
  <div id="vueBody" v-cloak style="min-width: 1100px">
    <el-input
      class="project-input"
      placeholder="请输入课程名称..."
      v-model="searchText"
      clearable
      @keyup.enter.native="search"
      @clear="showPageList(1)"
    ></el-input>
    <el-button class="search-btn" @click="search">搜索</el-button>
    <el-button
      class="project-start-btn"
      @click="newProject"
      type="default"
      v-if="this.userInfo.role == 'admin' || this.userInfo.role == 'teacher'"
      >创建课程</el-button
    >
    <div class="tabs">
      <Row :style="{ minHeight: contentMinHeight + 'px' }">
        <i-col>
          <div class="pro-tab">
            <Tabs v-model="currentTab" @on-click="changeTab">
              <!-- <tab-pane label="全部课程" name="All" icon="md-list"></tab-pane> -->
              <tab-pane label="当前课程" name="current" icon="md-list"></tab-pane>
              <tab-pane label="已结课程" name="old" icon="ios-copy"></tab-pane>
              <!-- <tab-pane
                label="2022学年"
                name="2022"
                icon="md-list"
                v-if="currentTab == 'old' || currentTab == '2022'"
              ></tab-pane> -->
              <!-- <tab-pane
                label="2023学年"
                name="2023"
                icon="md-list"
                v-if="currentTab == 'old'"
              ></tab-pane> -->
            </Tabs>
          </div>
          <div class="pro-content">
            <!-- <Alert show-icon style=" margin-left: 4%; width: 94%; " closable>
              提示
              <Icon type="ios-bulb-outline" slot="icon"></Icon>
              <template slot="desc">该功能正在测试中，敬请期待。 </template>
            </Alert> -->
            <div
              v-if="
                (currentProjectList != undefined && currentProjectList.length > 0) ||
                (oldClass != undefined && oldClass.length > 0)
              "
            >
              <div
                class="projectCard"
                v-for="item in currentProjectList"
                :key="item.index"
                style="width: 95%; margin-right: 5%"
              >
                <i-col
                  :xs="{ span: 5, offset: 1 }"
                  :md="{ span: 5, offset: 1 }"
                  :lg="{ span: 3, offset: 1 }"
                >
                  <div @click="projectInfoModalShow(item)" style="cursor: pointer">
                    <Card style="height: auto; margin: 15px -15px">
                      <!-- title-->
                      <span slot="title" class="projectTitle" :title="item.name">{{
                        item.name
                      }}</span>

                      <!-- 右上角的button-->
                      <div
                        class="operate"
                        slot="extra"
                        style="display: flex; align-items: center"
                      >
                        <Icon
                          type="md-eye"
                          :size="20"
                          title="Public project"
                          v-show="
                            !item.isMember &&
                            item.privacy == 'public' &&
                            userInfo.role != 'admin'
                          "
                        ></Icon>
                        <Icon
                          type="md-lock"
                          :size="20"
                          title="Discoverable project"
                          v-show="
                            !item.isMember &&
                            item.privacy == 'private' &&
                            userInfo.role != 'admin'
                          "
                        ></Icon>
                        <br />
                        <Icon
                          type="md-person"
                          :size="20"
                          title="Managed or joined project"
                          v-show="item.isMember || userInfo.role == 'admin'"
                          :id="item.classId"
                        ></Icon>
                      </div>
                      <!--  description-->
                      <div style="display: flex; align-items: center; height: 10px">
                        <strong style="text-align: center; min-width: 45px"
                          >简介：</strong
                        >
                        <p
                          style="
                            padding: 0 5px;
                            word-break: break-word;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            max-width: 170px;
                            height: 20px;
                          "
                          :title="item.description"
                        >
                          {{ item.description }}
                        </p>
                      </div>
                      <!-- avatar-->
                      <div
                        style="
                          height: 200px;
                          display: flex;
                          justify-content: center;
                          margin-top: 10px;
                        "
                      >
                        <img
                          :src="dataSever + item.image"
                          v-if="
                            item.image != null &&
                            item.image != '' &&
                            item.image != 'undefined'
                          "
                        />
                        <avatar
                          :username="item.name.slice(0, 12)"
                          :size ="200"
                          :title="item.name"
                          :rounded="false"
                          v-else
                        ></avatar>
                      </div>
                      <div class="cardicon">
                        <Icon type="ios-contacts" :size="15" Time></Icon>
                        <span
                          style="
                            height: 20px;
                            margin-left: 5%;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          :title="showTeachers(item.teachers)"
                        >
                          {{ showTeachers(item.teachers) }}
                          <!-- <strong>{{ item.createdTime.split("T")[0] }}</strong> -->
                        </span>
                      </div>
                    </Card>
                  </div>
                </i-col>
              </div>
              <div
                class="projectCard"
                v-for="item in oldClass"
                :key="item.index"
                style="width: 95%; margin-right: 5%"
              >
                <i-col
                  :xs="{ span: 5, offset: 1 }"
                  :md="{ span: 5, offset: 1 }"
                  :lg="{ span: 3, offset: 1 }"
                >
                  <div @click="projectInfoModalShow(item)" style="cursor: pointer">
                    <Card style="height: auto; margin: 15px -15px">
                      <!-- title-->
                      <span slot="title" class="projectTitle" :title="item.name">{{
                        item.name
                      }}</span>

                      <!-- 右上角的button-->
                      <div
                        class="operate"
                        slot="extra"
                        style="display: flex; align-items: center"
                      >
                        <Icon
                          type="md-eye"
                          :size="20"
                          title="Public project"
                          v-show="
                            !item.isMember &&
                            item.privacy == 'public' &&
                            userInfo.role != 'admin'
                          "
                        ></Icon>
                        <Icon
                          type="md-lock"
                          :size="20"
                          title="Discoverable project"
                          v-show="
                            !item.isMember &&
                            item.privacy == 'private' &&
                            userInfo.role != 'admin'
                          "
                        ></Icon>
                        <br />
                        <Icon
                          type="md-person"
                          :size="20"
                          title="Managed or joined project"
                          v-show="item.isMember || userInfo.role == 'admin'"
                          :id="item.classId"
                        ></Icon>
                      </div>
                      <!--  description-->
                      <div style="display: flex; align-items: center; height: 10px">
                        <strong style="text-align: center; min-width: 45px"
                          >简介：</strong
                        >
                        <p
                          style="
                            padding: 0 5px;
                            word-break: break-word;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            max-width: 170px;
                            height: 20px;
                          "
                          :title="item.description"
                        >
                          {{ item.description }}
                        </p>
                      </div>
                      <!-- avatar-->
                      <div
                        style="
                          height: 200px;
                          display: flex;
                          justify-content: center;
                          margin-top: 10px;
                        "
                      >
                        <img
                          :src="dataSever + item.image"
                          v-if="
                            item.image != null &&
                            item.image != '' &&
                            item.image != 'undefined'
                          "
                        />
                        <avatar
                          :username="item.name.slice(0, 12)"
                          :size="200"
                          :title="item.name"
                          :rounded="false"
                          v-else
                        ></avatar>
                        <img
                          src="@/assets/images/end1.png"
                          style="
                            position: absolute;
                            top: 150px;
                            width: 100px;
                            
                          "
                        />
                      </div>
                      <div class="cardicon">
                        <Icon type="ios-contacts" :size="15" Time></Icon>
                        <span
                          style="
                            height: 20px;
                            margin-left: 5%;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          :title="showTeachers(item.teachers)"
                        >
                          {{ showTeachers(item.teachers) }}
                          <!-- <strong>{{ item.createdTime.split("T")[0] }}</strong> -->
                        </span>
                      </div>
                    </Card>
                  </div>
                </i-col>
              </div>
            </div>
            <div v-else>
              <i-col span="22" offset="1">
                <Card :bordered="false" style="min-height: 350px; margin-top: 3%">
                  <div style="display: flex; justify-content: center">
                    <Icon type="md-alert" size="40" color="gray"></Icon>
                  </div>
                  <br />
                  <div style="display: flex; justify-content: center">
                    <h2 style="text-align: center; width: 50%">
                      No more projects in this category.
                    </h2>
                  </div>
                  <br />
                  <div style="display: flex; justify-content: center">
                    <h4 style="text-align: center; width: 50%; color: lightblue">
                      You can click the button right top to add a new project.
                      <br />Enriching your description of the project and attracting more
                      people to join in.
                    </h4>
                  </div>
                </Card>
              </i-col>
            </div>
          </div>
        </i-col>
      </Row>
      <div class="pro-page">
        <Page
          ref="pages"
          :total="totalCount"
          :page-size="pageSize"
          :current="currentPage"
          size="small"
          @on-change="changePage"
          show-elevator
          show-total
        ></Page>
      </div>
      <div th:replace="navigation::commonFooter"></div>
    </div>

    <Modal
      v-model="projectInfoModal"
      title="课程简介"
      width="800px"
      class="projectInfoModal"
    >
      <i-table
        stripe
        border
        :columns="columns"
        :data="projectDetailInfo"
        :show-header="false"
      ></i-table>
      <div slot="footer">
        <i-button
          v-show="
            !selectedProjectInfo.isMember && selectedProjectInfo.privacy == 'public'
          "
          title="点击查看该课程"
          @click="viewClass"
          >查看课程
        </i-button>
        <i-button
          v-show="
            !selectedProjectInfo.isMember && selectedProjectInfo.privacy == 'public'
          "
          type="success"
          title="点击加入该课程学习"
          @click="joinClass"
          >加入课程
        </i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { get, post, del, put } from "@/axios";
import Avatar from "vue-avatar";

export default {
  // created() {
  //   this.getHelpImg();
  // },
  data() {
    return {
      projectList: [],
      oldClass: [],
      currentProjectList: [],
      projectType: [],
      currentTab: "current",
      //初始化信息总条数
      //projectCount:10,
      contentMinHeight: 0,
      currentPage: 1,
      totalCount: this.count,
      //每页显示多少条
      pageSize: 50,
      // user
      userInfo: [],
      userState: false,
      freshEle: 0,
      searchText: "",
      selectTag: "",
      projectDetailInfo: [],
      columns: [
        { title: "Key", key: "key", width: "148px" },
        { title: "Value", key: "value", width: "618px" },
      ],
      projectInfoModal: false,
      viewclassInfo: '',
      selectedProjectInfo: {},
      dataSever: "",
    };
  },
  components: {
    Avatar,
  },
  
  created() {},
  mounted() {
    this.resizeContent();
    //判断用户状态，如果登录，判断project权限，如果否，不判断
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.dataSever = this.$store.getters.dataSever;
    if (this.userInfo != null && this.userInfo.userState) {
      this.userState = true;
    } else {
      this.userState = false;
      this.freshEle++;
    }
    this.showPageList(1);
  },
  methods: {
    showTeachers(value) {
      let teachersList = value.toString().split(",");
      let res = "";
      for (let i = 0; i < teachersList.length; i++) {
        if (res == "") {
          res += teachersList[i].split("(")[0];
        } else {
          res += "," + teachersList[i].split("(")[0];
        }
      }
      return res;
    },
    resizeContent() {
      this.contentMinHeight = window.innerHeight - 263;
    },
    async changePage(index) {
      this.currentPage = index;
      // this.showPageList(index);
      // console.log(this.currentTab);

      if (this.currentTab == "current") {
        this.showPageList(index);
      } else if (this.currentTab == "old") {
        // console.log(111111111);
        this.showOldPageList(index);
        for (let i = 0; i < this.projectList.length; i++) {
          let year = parseInt(this.projectList[i].createdTime.toString().slice(0, 4));
          let month = parseInt(this.projectList[i].createdTime.toString().slice(5, 7));
          if (year < currentYear) {
            this.oldClass.push(this.projectList[i]);
          } else if (year == currentYear && month < 9 && parseInt(currentMonth) > 8) {
            this.oldClass.push(this.projectList[i]);
          }
        }
      }
    },
    async search() {
      this.currentPage = 1;
      this.currentTab = "All";
      if (this.searchText == "") {
        this.showPageList(1);
      } else {
        let reqInfo = {
          asc: false,
          page: this.currentPage - 1,
          pageSize: this.pageSize,
          // sortField: "workName",
          searchField: "name",
          searchText: this.searchText,
        };
        let that = this;
        try {
          let res = await post("/visualResourceLibrary/class/s", reqInfo);
          // console.log(res);
          this.projectList = [];
          this.currentProjectList = [];
          this.oldClass = [];
          this.totalCount = res.data.data.total;
          let currentYear = new Date().getFullYear();
          let currentDate = new Date();
          let currentMonth = currentDate.getMonth() + 1;
          for (let i = 0; i < res.data.data.content.length; i++) {
            if (
              this.userInfo.userId != "" &&
              res.data.data.content[i].members &&
              res.data.data.content[i].members.toString().indexOf(this.userInfo.userId) !=
                -1
            ) {
              res.data.data.content[i]["isMember"] = true;
            }
            if (
              this.userInfo.userId != "" &&
              res.data.data.content[i].teachers.indexOf(this.userInfo.userId) >= 0
            ) {
              res.data.data.content[i]["isMember"] = true;
            }
            let year = parseInt(
              res.data.data.content[i].createdTime.toString().slice(0, 4)
            );
            let month = parseInt(
              res.data.data.content[i].createdTime.toString().slice(5, 7)
            );
            if (year < parseInt(currentYear)) {
              // this.oldClass.push(res.data.data.content[i]);
              this.projectList.push(res.data.data.content[i]);
            } else if (
              year == parseInt(currentYear) &&
              month < 8 &&
              parseInt(currentMonth) > 8
            ) {
              this.projectList.push(res.data.data.content[i]);
            } else {
              this.currentProjectList.push(res.data.data.content[i]);
              this.projectList.push(res.data.data.content[i]);
            }
          }
          that.searchFinished = true;
        } catch (e) {
          console.log(e);
        }
      }
    },
    async showPageList(index) {
      let reqInfo = {
        asc: false,
        page: index - 1,
        pageSize: this.pageSize,
      };
      try {
        let res = await get(
          "/visualResourceLibrary/class/getAllCurrent/" +
            reqInfo.page +
            "/" +
            reqInfo.pageSize
        );
        this.projectList = [];
        this.currentProjectList = [];
        this.oldClass = [];
        this.totalCount = res.data.data.total;
        this.currentProjectList = res.data.data.content;
        // console.log(res.data.data);

        this.currentPage = index;
        let currentYear = new Date().getFullYear();
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth() + 1;
        // console.log(currentMonth);

        for (let i = 0; i < res.data.data.content.length; i++) {
          if (
            this.userInfo.userId != "" &&
            res.data.data.content[i].members &&
            res.data.data.content[i].members.toString().indexOf(this.userInfo.userId) !=
              -1
          ) {
            res.data.data.content[i]["isMember"] = true;
          }
          if (
            this.userInfo.userId != "" &&
            res.data.data.content[i].teachers != null &&
            res.data.data.content[i].teachers.indexOf(this.userInfo.userId) >= 0
          ) {
            res.data.data.content[i]["isMember"] = true;
          }
        }
        console.log(this.projectList);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async showOldPageList(index) {
      let reqInfo = {
        asc: false,
        page: index - 1,
        pageSize: this.pageSize,
      };
      try {
        let res = await get(
          "/visualResourceLibrary/class/getAllClosed/" +
            reqInfo.page +
            "/" +
            reqInfo.pageSize
        );
        this.projectList = [];
        this.currentProjectList = [];
        this.oldClass = [];
        this.totalCount = res.data.data.total;
        this.oldClass = res.data.data.content;
        // console.log(res.data.data);

        this.currentPage = index;
        let currentYear = new Date().getFullYear();
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth() + 1;
        // console.log(currentMonth);

        for (let i = 0; i < res.data.data.content.length; i++) {
          if (
            this.userInfo.userId != "" &&
            res.data.data.content[i].members &&
            res.data.data.content[i].members.toString().indexOf(this.userInfo.userId) !=
              -1
          ) {
            res.data.data.content[i]["isMember"] = true;
          }
          if (
            this.userInfo.userId != "" &&
            res.data.data.content[i].teachers != null &&
            res.data.data.content[i].teachers.indexOf(this.userInfo.userId) >= 0
          ) {
            res.data.data.content[i]["isMember"] = true;
          }
        }

        console.log(this.projectList);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    newProject() {
      if (this.userState == false) {
        this.$router.push({ name: "Login" });
      } else {
        this.$router.push({ name: "newClass" });
      }
    },
    sendMessage(data) {
      //父子组件传值，然后使用refs调用导航栏中内容
      this.$refs.navigationEl.sendMessage(data);
    },
    async changeTab(value) {
      if (value == "All") {
        this.searchText = "";
        this.showPageList(1);
      } else if (value == "current") {
        // console.log(this.oldClass);
        // console.log(this.currentProjectList);
        this.oldClass = [];
        this.currentProjectList = [];
        this.showPageList(1);
      } else if (value == "old") {
        // console.log(this.oldClass);
        // console.log(this.currentProjectList);
        this.oldClass = [];
        this.currentProjectList = [];
        // console.log(this.oldClass);
        // console.log(this.currentProjectList);
        this.showOldPageList(1);
      } else {
        this.currentProjectList = [];
        this.oldClass = [];
      }
    },
    projectInfoModalShow(classInfo) {
      if (classInfo.isMember || this.userInfo.role == "admin") {
        this.$router.push({
          path: "classInfo?id=" + classInfo.classId + "&content=info",
        });
      } else {
        this.viewclassInfo = classInfo.classId
        this.selectedProjectInfo = Object.assign({}, classInfo);
        this.projectDetailInfo = [
          {
            key: "课程名称",
            value: classInfo.name,
          },
          {
            key: "课程概述",
            value: classInfo.description,
          },
          {
            key: "课程目标",
            value: classInfo.classTarget,
          },
          {
            key: "任课老师",
            value: this.showTeachers(classInfo.teachers),
          },
          {
            key: "创建时间",
            value: new Date(classInfo.createdTime),
          },
        ];
        this.projectInfoModal = true;
      }
    },
    async joinClass() {
      // console.log(this.selectedProjectInfo);
      let formData = new FormData();
      formData.append("type", "userId");
      formData.append("classId", this.selectedProjectInfo.classId);
      formData.append("userIds", this.userInfo.userId);
      try {
        let res = await post("/visualResourceLibrary/class/member", formData);
        window.location.reload();
        this.$Message.success("成功加入课程");
        // this.$router.push({
        //   path: "classInfo/" + this.selectedProjectInfo.classId + "?content=info",
        // });
      } catch (e) {
        this.$Message.error("加入失败");
        console.log(e);
      }
    },
    viewClass() {
      console.log(this.viewclassInfo)
      console.log(this.selectedProjectInfo.classId)
      this.$router.push({
        path: "classInfo?id=" + this.viewclassInfo + "&content=info",
        })
    }
  },
};
</script>
